<template>
  <receipts-core
    @clear-id-json="clearIdJson"
    @pose-id-json="poseIdJson"
    ref="idJsonItemsRefs"
    receipts-name="receipts"
    receipts-type="原料领料出库单"
    receipts-no="001"
  >
    <template #idJsonSlot>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类别号：" prop="categoryNo">
            <el-input v-model="idJsonItems.categoryNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类名：" prop="categoryName">
            <el-input v-model="idJsonItems.categoryName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </receipts-core>
</template>

<script lang="ts" setup>
import ReceiptsCore from "@/components/receipts/ReceiptsCore.vue";
import { provide, ref } from "vue";

//传递到单据表中需要展示的列
const receiptsTableFieldList = [
  {
    filedName: "idJson.categoryNo",
    label: "类别号",
    width: 220,
  },
  {
    filedName: "idJson.categoryName",
    label: "类名",
    width: 220,
  },
];
provide("receiptsTableFieldList", receiptsTableFieldList);

//传递idJson内的内容
const idJsonItems = ref({ categoryNo: null, categoryName: null } as unknown);
provide("idJsonItems", idJsonItems);

//清空插槽内容
const clearIdJson = () => {
  idJsonItems.value = { categoryNo: null, categoryName: null };
};

//父组件传递idJson并导入插槽内
const poseIdJson = (idJson: unknown) => {
  idJsonItems.value = idJson;
};
</script>

<style scoped></style>
